<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task6</title>
	<link rel="stylesheet" href="task6.css">
</head>
<body>
	<div id="container">
		<header>
			<div id="block"></div>
			<span id="ife">ife.baidu.com</span>
			<span id="date">2016.06</span><!-- 这里可以用js动态生成 -->
		</header>
		<main>
			<div class="up">
				<div class="up-img">
					<img src="images/1.jpg" alt="图片1">
					<div class="img-l"></div>
					<div class="img-r"></div>
				</div>
				<aside>
					<p class="about">About</p>
					<p class="about">Technologe</p> 
					<div class="para">About technologe about technologe about technologe</div>
					<div class="seven">700</div>
					<span class="three">3.2</span>
					<div class="thr">
						<div class="thr-1">css</div>
						<div class="thr-2">csscsscsscsscsscss</div>
					</div>
				</aside>
				<article>
					<section class="what">
						<h3>What</h3>
						<p>前端前端前端前端前端前端前端前端前端前端前端前
						前端前端前端前端前端前端前端前端前端前端前端前
						前端前端前端前端前端前端前端前端前端前端前端前
						端前端前端前端前端前端前端前端前端</p>
					</section>
					<section class="when">
						<h3>When</h3>
						<p>前端前端前端前端前端前端前端前端前端前端前
						端前端前端前端前端前端前端前端前端前端前端前
						前端前端前端前端前端前端前端前端前端前端前端
						前前端前端前端前端前端前端前端前端前端前端</p>

					</section>
					<section class="how">
						<h3>How</h3>
						<p>前端前端前端</p>
						<p>前端前端前端前端前端前端</p>
						<p class="percent">前端前端前端前端</p>
						<p>what---------40%</p>
						<p>what---------30%</p>
						<p>what---------30%</p>
					</section>
				</article>
			</div>
			<div class="down">
				<article class="down-left">
					<div class="title">
						<h1><span class="the">THE</span><span class="front">TECHNOLOGE OF FRONT</span></h1>
						<h2>前端技术领域</h2>
					</div>
					<div class="para">
						<span class="qian">前</span>
						<span class="para-span">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前前端前端前端前端
						<img src="images/2.jpg" alt="图片2">前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端</span>
						
						<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
						<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					</div>
				</article>
				<article class="down-right">
					<div class="down-right-up">
						<img src="images/3.jpg" alt="图片3">
						<div class="opa"></div>
						<div class="img3-title">
							<p>
								前端技术
								<span>前端技术前端技术</span>
							</p>
						</div>
					</div>
					<div class="down-right-down">
						<ul>
							<li><span class="triangle"></span>前端前端前端前端前端前端前端.................<span class="small">前端</span></li>
							<li><span class="triangle"></span>前端前端前端前端前端.......................<span class="small">前端前</span></li>
							<li><span class="triangle"></span>前端前端前端前端前端前端前端前端.............<span class="small">前端</span></li>
						</ul>
						<div class="last">
							<div class="last-left">
								<div class="backgroud"></div>
								<div>
									<div class="zero">0</div>
									<div class="num">
										<p class="num-1">ONE TWO THREE FOUR FIVE</p>
										<p class="num-2">hello world hello world hello world</p>
									</div>
								</div>
							</div>
							<div class="last-right">
								<div class="yinhao yin-left">“</div>					
								<p>world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world</p>
								<div class="yinhao yin-right">”</div>					
							</div>
						</div>
					</div>
				</article>
			</div>
		</main>
		<footer>
			<span id="com">ife.baidu.com</span>
		</footer>
	</div>
	<script></script>
</body>
</html